<html>
  <head>
    <meta charset="utf-8">
    <!-- NOTE:  Don't change this Title -->
    <title>
      Quiz Maker Utility
    </title>
    <link rel="stylesheet" href="style.css" type="text/css" />
    <link href="common.css" rel="stylesheet" type="text/css">
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
    </script>
    <script type="text/javascript">
      var hint_counter = 1;
      function setupProblemBlocks() {
      
      var str = '<br><br><p style="color:#999393;" >Proceed to Setup the Solution tab</p><script>function blocklyLoaded(blockly) {window.Blockly = blockly;}<'+'/'+'script><iframe style="width: 100%; height: 100%; border: 1px solid #ccc;" src="blockly.html"></iframe>';
        $("#proceed").append(str);
        console.log("RAM setupProblemBlocks()");
        Blockly.doIt('setupproblem');      
      }
      
      function setupSolutionBlocks() {
        console.log("RAM setupSolutionBlocks()");
        Blockly.doIt('setupsolution');
      }
      
      function previewTheQuiz() {
        console.log("RAM previewTheQuiz()");
        Blockly.doIt('preview',hint_counter);
        // BLockly.setupHint(hint_counter);
      }
      
      function generateJSON() {
        console.log("RAM generateJSON()");
        Blockly.doIt('json');
      }
      
      function testGiveHint() {
        console.log("RAM testGiveHint()");
        Blockly.doIt('hint');
      }
      
      function toggleNewTest() {
        console.log("RAM toggleNewTest()");
        Blockly.doIt('submit');
      }
      
      function onAnswerTypeSelected(option) {
        console.log("RAM onAnswerTypeSelected()");
        Blockly.doIt('type', option);
      }
      
      function onExpressionTypeSelected(option) {
        console.log("RAM onExpressionTypeSelected()");
        Blockly.doIt('expression', option);
      }
      
      function getVariableRanges(obj) {
        console.log("RAM getVariableRanges()");
        Blockly.doIt('variables', obj);
      }
      
      function initQuizMaker() {
        console.log("RAM initQuizMaker()");
        Blockly.doIt('init', './');
      }
      function displayHelp() {
        console.log("RAM: help");
        alert("Help is on the way");
      }
      function reset() {
        console.log("RAM: reset");
        var response = confirm("Are you sure? This will reinitialize the app.");
        if (response == true) {
          
        }
        
      }
      
      function addHint() {
        hint_counter++;
        console.log("RAM: added hint");
        var text = document.createElement('div');
        text.innerHTML = '<br><input type="Text" id="hint_'+hint_counter+'" size="120" placeholder="Hint #'+hint_counter+'."> </input>';
        document.getElementById("hint_input").appendChild(text);
        
      }
      
      /* Code to control UI */
      $(document).ready(function(){
        var set_tab = function(tab_container_id, tab_id){
          $('#' + tab_container_id + ' ul li').removeClass('active');
          $('#' + tab_container_id + ' a[rel="'+tab_id+'"]').parent().addClass("active");
          $('#' + tab_container_id + '_content .tab_content').hide();
          $('#' + tab_container_id + '_content #' + tab_id).fadeIn();
        }
            
            //	Function that gets the hash from URL
            function get_hash(){
              if (window.location.hash) {
                var url = window.location.hash;
                var current_hash = url.substring(1);
                var current_hashes = current_hash.split(",");
                $.each(current_hashes, function(i, v){
                  set_tab($('a[rel="'+v+'"]').parent().parent().parent().attr('id'), v);
                });
              }
            }
        
        get_hash();
        
        //	Looks for changes in the URL hash
        $(window).bind('hashchange', function() {
          get_hash();
        });
        
        //	Called when clicked on the tab itself
        $('.tabs_wrapper ul li').click(function() {
          var tab_id = $(this).children('a').attr('rel');
          window.location.hash = tab_id;
          return false;
        });
      });     
      
    </script>
      
    <style>
      body {
        background-color: white;
        font-family: sans-serif;
      }
      h1 {
        font-weight: normal;
        font-size: 140%;
      }
      #svgDiv {
        height: 350px;
        width: 98%;
        border: 1px solid #ccc;
      }
      
      /* Quiz area */
      textarea.quiz_question {
        text-align:left;
        background-color= #f3f3f3;
        rows="4";
        columns="60";
      }
      textarea.quiz_result {
        text-align:left;
        rows="4";
        columns="60";
      }
    </style>
  </head>
  <body>
     <button title="Reinitialize everything" 
             class="help"
             id="reset_btn" 
             onclick="reset()"
             align="right">Reset</button>
    <!-- Tabs session section declaration-->
    <div class="tabs_wrapper">
      
      
     <div id="tabs">
		<ul>
          <li class="active">
            <a href="#setup" rel="setup">
              Setup the quiz
            </a>
          </li>
          <li>
            <a href="#solution" rel="solution" onclick="setupSolutionBlocks()">
              Setup the solution
            </a>
          </li>
          <li>
            <a href="#preview" rel="preview"  onclick="previewTheQuiz()">
              Preview the quiz
            </a>
          </li>
          <li>
            <a href="#json" rel="json" onclick="generateJSON()">
              JSON
            </a>
          </li>
          <li>
            <a href="#help" rel="help" onclick="displayHelp()">
              Help
            </a>
          </li>
      </ul>
  </div>
  
  <!-- Tabs begin here -->
  <div id="tabs_content">
  
  <!--Setup the Problem -->
	<div id="setup" class="tab_content" style="display: block;">
      <!--    
			<fieldset>
			<legend>
			Quiz Maker Utility
			</legend>
		-->
      <input type="hidden" id="name">
      </input>
      Name: 
      <input title="Plain text name for the quiz" size="" type="Text" id="display_name" value="Simple Problem">
      
  </input>
  &nbsp;&nbsp;
  Answer Type: 
  <select title="The type of quiz"  id="answer_type" onchange="onAnswerTypeSelected(this)">
    
    <option 
    title="The student's answer will be evaluated and the value compared to your solution."
    value="eval_expr">
      Expression Evaluation
    </option>
    <option 
    title="The student's answer will be compared character-by-charecter with your solution." 
    value="xml_blocks">
      Exact Block-for-block Match
    </option>
    <option 
    title="The student-defined function will be evaluated on test inputs that you provide  and the results compared with your function's results."
    value="func_def">
      Function Definition
    </option>
  </select>
  <!-- Some invisible elements that appear based on selection of answer_type -->
  <select title="Type of expression to evaluate" style="visibility:hidden" id="expression_type" onchange="onExpressionTypeSelected(this)">
    
    <option value="relation">
      Relational: &LT;, =, ...
    </option>
    <option value="arithmetic">
      Arithmetic: +, *, ...
    </option>
    <option value="boolean">
      Boolean: AND, OR, NOT
    </option>
  </select>
    
  <br>
  Description: 
  <input title="Type is a brief description of the quiz" 
  type="Text" 
  id="description" 
  size="111" 
  value="Describe the quiz problem.">
  
  </input>
  <br>
  QuestionHTML: 
  <input title="Question presented to student. Can have HTML and variables. Hint 
<enter>
to prompt for variables"  
  type="Text" 
  onkeypress="if (event.keyCode == 13) getVariableRanges(this)" 
  id="question_html" size="106" 
  value="Can have HTML and string variables such as $#STR1#$ and numeric variables like -91.9. Press 
<ENTER>
to set."
  </input>  
  
  <div id="hint_input">
    <br>
    Hints: 
    <input type="Text" id="hint_1" size="120" placeholder="Hint #1.">
    
  </input>
  </div>
  <button title="Add another hint" onclick="addHint()">
    Add another hint.
  </button>
  
  <br>
  Built-in Blocks 
  <input type="checkbox" name="built_ins" value="math" checked="true">
  Math
  <input type="checkbox" name="built_ins" value="logic" checked="true">
  Logic
  <input type="checkbox" name="built_ins" value="text" checked="true">
  Text
  <input type="checkbox" name="built_ins" value="colors" checked="true">
  Colors
  <input type="checkbox" name="built_ins" value="controls" checked="true">
  Controls
  <input type="checkbox" name="built_ins" value="variables" checked="true">
  Variables
  <input type="checkbox" name="built_ins" value="procedures" checked="true">
  Procedures
  <br>
  Components
  <input type="checkbox" name="components" value="Button">
  Button
  <input type="checkbox" name="components" value="Sound">
  Sound
  <br>
  <br>
  <!--    
<fieldset>
<legend>
Blocks Workspace: Used for setting up problem, setting up solution, and testing the quiz.
</legend>
-->
 <button title="Setup how the quiz will be presented in the workspace" 
             id="problemspace"  
             onclick="setupProblemBlocks()">Setup Problem</button>
             
 <div id="proceed">
 <div style="visibility:hidden" id="q_instructions">
      Instructions go here
	</div>
	
 </div>            
             
             
</div>
<div id="solution" class="tab_content">

	<div style="visibility:hidden" id="s_instructions">
      Instructions go here
	</div>


  <script>
    function blocklyLoaded(blockly) {
      // Called once Blockly is fully loaded.
      window.Blockly = blockly;
    }
  </script>
  <iframe style="width: 100%; height: 100%; border: 1px solid #ccc;" src="blockly.html">
  </iframe>
</div>
<div id="preview" class="tab_content">

<table>
	<div style="visibility:hidden" id="instructions">
      Instructions go here
	</div>
   <tr>
   	<td>
      	<div id="quiz_name" style="visibility:hidden">
         	Quiz Name goes here
      	</div>
      </td>
	</tr>
	<tr>
		<td>
      	<div id="quiz_question" style="visibility:hidden">
         	Here is where the quiz question goes.
         </div>
         <div id="hint_html" style="visibility:hidden">
            Here is where the hint goes.
         </div>
		</td>
		<td>
      <table>
      	<tr>
         	<td>
            	<input style="visibility:hidden" id="quiz_answer" width="40" type="text" onkeypress="if (event.keyCode == 13) toggleNewTest()">
            	</input>
          	</td>
          	<td class="tabmin">
            	&nbsp;
         	</td>
 		 		<td align="center">
           		<button style="visibility:hidden" id="hint_button" onclick="testGiveHint()">
             	Hint
           		</button>
         	</td>
		 		<td class="tabmin">
           		&nbsp;
         	</td>
		 		<td class="tabmin">
           		&nbsp;
         	</td>
 		 		<td align="center">
           		<button style="visibility:hidden" id="submit_new_toggle" onclick="toggleNewTest()">
             	Submit
           	</button>
         	</td>
		 		<td class="tabmin">
           		&nbsp;
       		</td>
      	</tr>
  		</table>
		</td>
	</tr>
<tr>
	<td>
   	<div style="visibility:hidden" contenteditable="true" width="300px" height="100px" id="quiz_result" readonly="readonly">
      	Result goes here 
    	</div>
  	</td>
</tr>
</table> 

  
  <script>
    function blocklyLoaded(blockly) {
      // Called once Blockly is fully loaded.
      window.Blockly = blockly;
    }
  </script>
  <iframe style="width: 100%; height: 100%; border: 1px solid #ccc;" src="blockly.html">
  </iframe>
</div>
<div id="json" class="tab_content">
  <p id="json_code">
    
  </p>
</div>
<div id="help" class="tab_content">
  <p>
    Help content goes here.
  </p>
</div>
</div>
</div>
</body>
</html>
